<template>
  <div class="control-setting">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="控件设置" name="control">
        <el-form :label-position="'top'">
          <template v-if="formField && formField.group === 'form'">
            <el-form-item label="控件名称">
              <el-input v-model="formField.item.label" clearable />
            </el-form-item>
            <el-form-item label="对应数据">
              <el-select v-model="formField.field" clearable>
                <el-option v-for="item in fieldSource" :key="item.columnName" :label="item.columnDescription"
                  :value="item.columnName" />
              </el-select>
            </el-form-item>
            <el-form-item label="标签位置">
              <el-radio-group v-model="formField.item.labelPosition">
                <el-radio-button label="无" value="" />
                <el-radio-button label="左" value="left" />
                <el-radio-button label="右" value="right" />
                <el-radio-button label="上" value="top" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="提示语" :label-position="'left'">
              <el-input v-model="formField.attrs.placeholder" clearable />
            </el-form-item>
            <el-form-item label="可清空" :label-position="'left'"
              v-if="formField.type === 'input' || formField.type === 'inputTag' || formField.type === 'date' || formField.type === 'select' || formField.type === 'rate'">
              <el-switch v-model="formField.attrs.clearable" />
            </el-form-item>
            <template v-if="formField.type === 'input'">
              <el-form-item label="前缀">
                <el-input v-model="formField.attrs.prepend" clearable />
              </el-form-item>
              <el-form-item label="后缀">
                <el-input v-model="formField.attrs.append" clearable />
              </el-form-item>
            </template>
            <template v-if="formField.type === 'input' || formField.type === 'textarea'">
              <el-form-item label="最大长度">
                <el-input v-model="formField.attrs.maxlength" clearable />
              </el-form-item>
            </template>
            <el-form-item label="自动高度" :label-position="'left'" v-if="formField.type === 'textarea'">
              <el-switch v-model="formField.attrs.autosize" />
            </el-form-item>
            <el-form-item label="选项数据"
              v-if="formField.type === 'select' || formField.type === 'radio' || formField.type === 'checkbox'">
              <el-row v-for="(item, index) in formField.options">
                <el-col :span="8">
                  <el-input :size="'small'" :placeholder="'值'" v-model="item.value" />
                </el-col>
                <el-col :span="8" :offset="2">
                  <el-input :size="'small'" :placeholder="'名称'" v-model="item.label" />
                </el-col>
                <el-col :span="4" :offset="2">
                  <el-button type="danger" :size="'small'" :icon="Delete" circle @click="deleteOption(index)" />
                </el-col>
              </el-row>
              <el-row>
                <el-button type="primary" :size="'small'" plain @click="addOption">新增</el-button>
              </el-row>
            </el-form-item>
            <el-form-item label="数据校验">
              <el-row v-for="(item, index) in formField.item.rules">
                <el-input v-model="(item.message as string)">
                  <template #prepend>
                    <el-select v-model="item.type" style="width: 60px" @change="changeRule">
                      <el-option v-for="rule in defaultRule" :label="rule.label" :value="rule.type" />
                    </el-select>
                  </template>
                  <template #append>
                    <el-button :icon="Delete" @click="deleteRule(index)" />
                  </template>
                </el-input>
                <el-input v-if="item.type === 'regexp'" v-model="(item.pattern as string)"
                  placeholder="正则字符串(不包含前后斜杠)"></el-input>
              </el-row>
              <el-row>
                <el-button type="primary" :size="'small'" plain @click="addRule">新增</el-button>
              </el-row>
            </el-form-item>
          </template>
          <template v-else-if="formField && formField.group === 'layout'">
            <el-form-item label=" 列数">
              <el-radio-group v-model="formField.attrs.cols">
                <el-radio-button label="两列" :value="2" />
                <el-radio-button label="三列" :value="3" />
                <el-radio-button label="四列" :value="4" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="布局">
              <div class="flex flex-col w-full p-2">
                <el-row :gutter="10" v-for="item in gridLayoutConfig" v-model="formField.attrs.layout"
                  @click="layoutRowClick(item)" class="layout-row"
                  :class="item.id === formField.attrs.layout ? 'is-active' : ''">
                  <el-col v-for="col in item.values" :span="span(col, item.values)">
                    <div class="grid-content"></div>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label=" 表单设置" name="form">
        <el-form :label-position="'top'" v-if="formSetting" v-model="formSetting">
          <el-form-item label="表单名称">
            <el-input v-model="formSetting.name" />
          </el-form-item>
          <el-form-item label="数据源">
            <el-select v-model="formSetting.sourceCode">
              <el-option v-for="item in formSource" :key="item.name" :label="item.description" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="标签位置">
            <el-radio-group v-model="formSetting.formStyle.labelPosition">
              <el-radio-button label="左" value="left" />
              <el-radio-button label="右" value="right" />
              <el-radio-button label="上" value="top" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="星号位置">
            <el-radio-group v-model="formSetting.formStyle.requireAsteriskPosition">
              <el-radio-button label="左" value="left" />
              <el-radio-button label="右" value="right" />
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { Delete } from "@element-plus/icons-vue";
import { TabsPaneContext } from "element-plus";
import { FormField, FormSetting, gridLayout } from "../..";
import defaultRule from "./validate";
import DesignTableApi, { DesignColumnModel, DesignTableModel } from "@/api/design/designTable";

const activeName = ref("control");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.paneName as string;
};

const formSetting = defineModel<FormSetting>("formSetting");
const formField = defineModel<FormField>("formField");

// 定义表单字段数据源接口类型
export interface FormSource {
  id?: string;
  name?: string;
  fields: SourceField[];
}

export interface SourceField {
  field?: string;
  name?: string;
}

const formSource = ref<DesignTableModel[]>([]);
onMounted(async () => {
  const list = await DesignTableApi.query();
  formSource.value = list;
})

watch(
  () => formSetting.value.sourceCode,
  async (newVal) => {
    if (newVal) { // 确保有值才执行
      await sourceChange(newVal);
    }
  },
  { immediate: true } // 立即执行一次
);

const fieldSource = ref<DesignColumnModel[]>([]);
const sourceChange = async (value: string) => {
  const list = await DesignTableApi.queryColumn(value);
  fieldSource.value = list;
}

const addOption = () => {
  formField.value.options.push({
    label: '',
    value: ''
  })
}

const deleteOption = (index: number) => {
  formField.value.options.splice(index, 1);
}

const addRule = () => {
  formField.value.item.rules.push({ ...defaultRule.value[0] });
}

const changeRule = (value) => {
  const rule = defaultRule.value.find(x => x.type === value);
  const itemRule = formField.value.item.rules.find(x => x.type === value);
  Object.assign(itemRule, rule);
}

const deleteRule = (index: number) => {
  formField.value.item.rules.splice(index, 1);
}

const gridLayoutConfig = computed(() => {
  return gridLayout.find(x => x.cols === formField.value.attrs.cols).rows;
})

const layoutRowClick = (row) => {
  formField.value.attrs.layout = row.id;
}

const span = (col: number, array: number[]) => {
  const cols = array.reduce((acc, curr) => acc + curr, 0);
  return col * 24 / cols;
}
</script>

<style lang="scss" scoped>
.control-setting {
  border-left: 1px solid #ddd;
  padding: 10px;
  width: 300px;
  overflow-y: auto;
}

.layout-row {
  margin-left: 0px;
  margin-right: 0px;
  padding: 5px 0px;
  border: 1px solid #ddd;
  border-radius: 8px;

  &.is-active {
    border: 1px solid #2d7ef7;
  }

  & .grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: #d3dce6;
  }

  &:hover {
    cursor: pointer;
  }
}
</style>
